<sqx-title [message]="schemasState.schemaName" />
@if (schemaTab | async; as tab) {
    <sqx-layout innerWidth="50" layout="main">
        <ng-container title>
            <ul class="nav nav-tabs2">
                <li class="nav-item">
                    <a class="nav-link" [class.active]="tab === 'fields'" [queryParams]="{ tab: 'fields' }" [routerLink]="[]">
                        {{ "schemas.tabFields" | sqxTranslate }}
                    </a>
                </li>

                @if (schema.type !== "Component") {
                    <li>
                        <a class="nav-link" [class.active]="tab === 'ui'" [queryParams]="{ tab: 'ui' }" [routerLink]="[]">
                            {{ "schemas.tabUI" | sqxTranslate }}
                        </a>
                    </li>
                }

                @if (schema.type !== "Component") {
                    <li>
                        <a class="nav-link" [class.active]="tab === 'scripts'" [queryParams]="{ tab: 'scripts' }" [routerLink]="[]">
                            {{ "schemas.tabScripts" | sqxTranslate }}
                        </a>
                    </li>
                }

                <li>
                    <a class="nav-link" [class.active]="tab === 'json'" [queryParams]="{ tab: 'json' }" [routerLink]="[]">
                        {{ "schemas.tabJson" | sqxTranslate }}
                    </a>
                </li>

                @if (!hideIndexes) {
                    <li>
                        <a class="nav-link" [class.active]="tab === 'indexes'" [queryParams]="{ tab: 'indexes' }" [routerLink]="[]">
                            {{ "schemas.tabIndexes" | sqxTranslate }}
                        </a>
                    </li>
                }

                <li>
                    <a class="nav-link" [class.active]="tab === 'more'" [queryParams]="{ tab: 'more' }" [routerLink]="[]">
                        {{ "schemas.tabMore" | sqxTranslate }}
                    </a>
                </li>
            </ul>
        </ng-container>
        <ng-container menu>
            <div class="btn-group me-2" #buttonPublish sqxTourStep="publishSchema">
                <button
                    class="btn btn-publishing btn-toggle"
                    [class.btn-success]="schema.isPublished"
                    (click)="publish()"
                    [disabled]="!schema.canPublish"
                    type="button">
                    {{ "schemas.published" | sqxTranslate }}
                </button>
                <button
                    class="btn btn-publishing btn-toggle"
                    [class.btn-danger]="!schema.isPublished"
                    (click)="unpublish()"
                    [disabled]="!schema.canUnpublish"
                    type="button">
                    {{ "schemas.unpublished" | sqxTranslate }}
                </button>
            </div>
            <button
                class="btn btn-text-secondary me-2"
                #buttonOptions
                attr.aria-label="{{ 'common.options' | sqxTranslate }}"
                (click)="editOptionsDropdown.toggle()"
                type="button">
                <i class="icon-dots"></i>
            </button>
            <sqx-dropdown-menu scrollY="true" [sqxAnchoredTo]="buttonOptions" *sqxModal="editOptionsDropdown; closeAlways: true">
                @if (schemasState.canCreate) {
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" (click)="cloneSchema()"> {{ "common.clone" | sqxTranslate }} </a>
                }
                <ng-container>
                    <div class="dropdown-divider"></div>
                    <a
                        class="dropdown-item dropdown-item-delete"
                        [class.disabled]="!schema.canDelete"
                        confirmRememberKey="deleteSchema"
                        confirmText="i18n:schemas.deleteConfirmText"
                        confirmTitle="i18n:schemas.deleteConfirmTitle"
                        (sqxConfirmClick)="deleteSchema()">
                        {{ "common.delete" | sqxTranslate }}
                    </a>
                </ng-container>
            </sqx-dropdown-menu>
        </ng-container>
        <ng-container content>
            @switch (tab) {
                @case ("ui") {
                    <sqx-schema-ui-form [schema]="schema" />
                }

                @case ("scripts") {
                    <sqx-schema-scripts-form [schema]="schema" />
                }

                @case ("json") {
                    <sqx-schema-export-form [schema]="schema" />
                }

                @case ("indexes") {
                    <sqx-schema-indexes [schema]="schema" />
                }

                @case ("more") {
                    <sqx-list-view innerWidth="50rem">
                        <div>
                            @if (schema.type !== "Component") {
                                <sqx-schema-preview-urls-form [schema]="schema" />
                            }
                            <sqx-schema-field-rules-form [schema]="schema" /> <sqx-schema-edit-form [schema]="schema" />
                        </div>
                    </sqx-list-view>
                }

                @default {
                    <sqx-list-view innerWidth="50rem" table="true">
                        <div><sqx-schema-fields [schema]="schema" /></div>
                    </sqx-list-view>
                }
            }
        </ng-container>
        <ng-template sidebarMenu>
            <div class="panel-nav">
                <a
                    class="panel-link"
                    attr.aria-label="{{ 'common.history' | sqxTranslate }}"
                    queryParamsHandling="preserve"
                    replaceUrl="true"
                    routerLink="history"
                    routerLinkActive="active"
                    sqxTourStep="history"
                    title="i18n:common.history"
                    titlePosition="left">
                    <i class="icon-time"></i>
                </a>
                <a
                    class="panel-link"
                    attr.aria-label="{{ 'common.help' | sqxTranslate }}"
                    queryParamsHandling="preserve"
                    replaceUrl="true"
                    routerLink="help"
                    routerLinkActive="active"
                    sqxTourStep="help"
                    title="i18n:common.help"
                    titlePosition="left">
                    <i class="icon-help2"></i>
                </a>
            </div>
        </ng-template>
    </sqx-layout>
}
<router-outlet></router-outlet>
